<template>
	<div class="wrapper">
		<input type="text" placeholder="点此进行搜索"
		 @input="searchAction($event)"/>
		
		<ul class="business" v-if="searchResult.length >0" >
			<li v-for="(item,index) of searchResult"
			 :key="index" @click="toBusinessInfo(item.businessId)">
				<div class="business-img">
					<img :src="item.businessImg">
					
				</div>
				<div class="business-info">
					<h3>{{item.businessName}}</h3>
					<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
					<p>{{item.businessExplain}}</p>
				</div>
			</li>
		</ul>
		
	<!-- 商家列表部分 -->
	<ul class="business" v-else>
		<li v-for="(item,index) of businessArr"
		 :key="index" @click="toBusinessInfo(item.businessId)">
			<div class="business-img">
				<img :src="item.businessImg">
				
			</div>
			<div class="business-info">
				<h3>{{item.businessName}}</h3>
				<p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
				<p>{{item.businessExplain}}</p>
			</div>
		</li>
	</ul>
	</div>
</template>

<script>
	export default {
		name: 'Search',
		
		data() {
			return {
				searchResult: [],
				orderTypeId: this.$route.query.orderTypeId,
				businessArr: [],
			}
		},
		methods: {
			searchAction (e) {
				const inputValue = e.target.value;
				
				this.searchResult=this.businessArr.filter((item)=>{
					if(item.businessName.includes(inputValue) ){
						return item;
					}
				})
			},
        toBusinessInfo(businessId) {
            this.$router.push({ path: '/businessInfo', query: { businessId: businessId } });
        }
		},
		created() {
			//根据orderTypeId查询商家信息
			this.$axios.post('BusinessController/listAllBusiness', this.$qs.stringify({
				
			})).then(response => {
				this.businessArr = response.data;
				
			}).catch(error => {
				console.error(error);
			});
		}
		
	}
	
</script>

<style>
	.wrapper {
		width: 100%;
		height: 100%;
	}
	.wrapper input {
		width:100%;
		height: 10vw;
	}
	/****************** 商家列表部分 ******************/
	.wrapper .business {
		width: 100%;
		
		
	}
	
	.wrapper .business li {
		width: 100%;
		box-sizing: border-box;
		padding: 2.5vw;
		border-bottom: solid 1px #DDD;
		user-select: none;
		cursor: pointer;
		display: flex;
		align-items: center;
	}
	
	.wrapper .business li .business-img {
		/*这里设置为相当定位，成为business-img-quantity元素的父元素*/
		position: relative;
	}
	
	.wrapper .business li .business-img img {
		width: 20vw;
		height: 20vw;
	}
	
	.wrapper .business li .business-img .business-img-quantity {
		width: 5vw;
		height: 5vw;
		background-color: red;
		color: #fff;
		font-size: 3.6vw;
		border-radius: 2.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		/*设置成绝对定位，不占文档流空间*/
		position: absolute;
		right: -1.5vw;
		top: -1.5vw;
	}
	
	.wrapper .business li .business-info {
		margin-left: 3vw;
	}
	
	.wrapper .business li .business-info h3 {
		font-size: 3.8vw;
		color: #555;
	}
	
	.wrapper .business li .business-info p {
		font-size: 3vw;
		color: #888;
		margin-top: 2vw;
	}
</style>